<template>
  <div :class="[fixedHeader ? 'app-main' : 'app-main-nofixed-header']">
    <!-- key 采用 route.path 和 route.fullPaht 有着不同的效果，大多数时候 path 更通用 -->
    <router-view v-slot="{ Component, route }">
      <transition name="el-fade-in" mode="out-in">
        <!-- <keep-alive :include="tagsViewStore.cachedViews"> -->
        <component :is="Component" :key="route.path" class="main-content" />
        <!-- </keep-alive> -->
      </transition>
    </router-view>
  </div>
</template>
<script setup lang="ts">
defineProps({
  fixedHeader: Boolean
});
</script>
<style scoped lang="scss">
.app-main {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

.app-main-nofixed-header {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.main-content {
  margin: 24px;
}
</style>
